<template>
  <div>
    <div class="gva-search-box icey_bg">
      <el-form ref="searchForm" :rules="searchFormRules" :model="searchForm">
        <el-row>
          <el-col :span="4">
            <el-form-item prop="enableField" label="是否启用">
              <el-select v-model="searchForm.enableField" placeholder="状态" style=" width: 120px" allowClear>
                <el-option value="true">启用</el-option>
                <el-option value="false">禁用</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="affectsField" label="影响类型">
              <el-select v-model="searchForm.affectsField" placeholder="请选择" style=" width: 200px" allowClear>
                <el-option v-for="item in searchFormRules" :key="item.name" :value="item.name">{{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="search" label="模糊查询">
              <el-input v-model="searchForm.search" placeholder="请输入模糊查询" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-button type="primary" @click="searchRules" icon="Search" style="margin-left: 10px">
              查询
            </el-button>
            <el-button @click="resetForm()">Reset</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <el-button type="primary" @click="dialogFormVisible = true" icon="Plus" round style="margin-left: 10px">新建POC</el-button>
      </div>
      <div>
        <el-table :data="tableData">
          <el-table-column align="left" label="序号" min-width="60" prop="id" sortable="custom"/>
          <el-table-column align="left" label="漏洞编号" min-width="120" prop="vul_id" />
          <el-table-column align="left" label="状态" min-width="50" prop="enable" >
            <template #default="scope">
              <div v-if="scope.row.enable">
                <el-tag
                    class="mx-1"
                    type="success"
                    effect="light">
                  启用
                </el-tag>
              </div>
              <div v-if="!scope.row.enable">
                <el-tag
                    class="mx-1"
                    type="danger"
                    effect="light">
                  禁用
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="poc名称" min-width="150" prop="json_poc.name" />
          <el-table-column align="left" label="漏洞名称" min-width="150" prop="desp_name" />
          <el-table-column align="left" label="影响类" min-width="150" prop="affects" />
          <el-table-column align="left" fixed="right" label="操作" width="200">
            <template #default="scope">
              <el-button
                  icon="edit"
                  size="small"
                  type="primary"
                  link
                  @click="editRuleFunc(scope.row)"
              >编辑
              </el-button>
              <el-button
                  icon="delete"
                  size="small"
                  type="primary"
                  link
                  @click="deleteRuleFunc(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="gva-pagination">
          <el-pagination
              :current-page="page"
              :page-size="pageSize"
              :page-sizes="[15, 30, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
          />
        </div>

        <el-dialog v-model="dialogFormVisible" title="Shipping address" :fullscreen="true">
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogFormVisible = false">Cancel</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">
                Confirm
              </el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<style>

</style>
<script>
import {getVulBasic} from "@/api/my/loophole/vul";
import {deleteRule, getRuleList} from "@/api/my/loophole/rule";
import {ElMessage} from "element-plus";

export default {
  name: 'vulnerabilityRules',
  data() {
    return {
      searchForm: {
        enableField: '',
        affectsField: '',
        search: '',
      },
      searchFormRules: [],
      pageSize: 15,
      page: 1,
      total: 0,
      tableData: [],
      dialogFormVisible: false,
    }
  },
  mounted() {
    let vul = window.localStorage.getItem("vul")

    if (vul == null){
      getVulBasic().then(res => {
        console.log(res)
        window.localStorage.setItem('vul', JSON.stringify(res.data))
      });
    }
    this.setVulBasic()
    this.searchRules()
  },
  // created() {
  //   this.setVulBasic()
  //   this.searchRules()
  // },
  methods: {
    setVulBasic() {
      this.searchFormRules = JSON.parse(window.localStorage.getItem("vul")).ModuleAffects
    },
    searchRules() {
      getRuleList({
        ...this.searchForm,
        page: this.page,
        pagesize: this.pageSize
      }).then(res => {
        console.log(res)
        this.tableData = res.data.data
        this.total = res.data.total
      })
    },
    resetForm() {
      this.searchForm.affectsField = ''
      this.searchForm.enableField = ''
      this.searchForm.search = ''
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.searchRules()
    },
    handleCurrentChange(val) {
      this.page = val
      this.searchRules()
    },
    //删除
    deleteRuleFunc(item) {
      if (confirm("确定删除：" + item.json_poc.name + " ?")) {
        // 用户单击了“确认”按钮，执行删除操作
        deleteRule(item.id).then(res => {
          if (res.code == 0) {
            ElMessage.success('删除成功！')
            this.searchRules()
            return
          } else {
            ElMessage.error(res.msg)
          }
        })
      } else {
        // 用户单击了“取消”按钮，不执行删除操作
        // ...

      }

    }
  },
}
</script>

